<template>
  <!--本地上传-->
  <view>
    <!--提示-->
    <uni-notice-bar color="#00A660" background-color="#f0f9eb" text="请用实体印章加盖至白色A4纸上，彩色扫描后上传并制作，平台审核后方可使用。"/>
    <!-- 选择印章规格 -->
    <view class="item-title">1、选择印章规格</view>
    <uni-data-picker
        placeholder="选择印章规格"
        :localdata="sealSpecTree"
        v-model="selectSealSpecValue"
        @nodeclick="handleSealSpecChange"
        :clear-icon="false"/>
    <!-- 上传印章章面图 -->
    <view class="item-title">2、上传印章章面图</view>
    <view class="item-step"> 第1步：空白A4纸上盖章</view>
    <view class="item-step"> 第2步：彩色扫描盖章文件（分辨率建议600*600）</view>
    <view class="item-step"> 第3步：上传彩色扫描图片</view>
    <view class="authentication_payPic">
      <img :src="sealImage" style="width: 150rpx;height: 150rpx;" @click="previewImg(sealImage)">
      <view class="img_span">
        <view style="margin-bottom: 25rpx;">请上传印章彩色扫描图片，支持 jpg/jpeg/png 格式，不超过5M。</view>
        <uni-tag text="上传印章章面图" type="primary" @click="handleFileChange"/>
      </view>
    </view>

  </view>
</template>

<script>
import {sealSpecTree} from "@/api/ec/console/seal/sealSpec";

export default {
  data() {
    return {
      // 印章规格树
      sealSpecTree: [],
      // 选中的印章规格
      selectSealSpec: {},
      selectSealSpecValue: null,
      // 印章图片
      sealImage: require('static/images/upload-image.png'),
      sealImageOk: false,
    }
  },
  onUnload() {
    this.unbindingRefreshData();
  },
  created() {
    this.bindingRefreshData();
    this.getTree();
  },
  methods: {
    /** 绑定 */
    bindingRefreshData() {
      // 证件图片剪切成功
      uni.$on('sealAddCropperCropperSuccess', (base64, type) => {
        this.cropperSuccess(base64, type);
      });
    },
    /** 解除绑定 */
    unbindingRefreshData() {
      uni.$off('sealAddCropperCropperSuccess');
    },
    /** 查询印章规格树 */
    getTree() {
      sealSpecTree().then(response => {
        let sealSpecTree = response.data;
        let str = JSON.stringify(sealSpecTree);
        str = str.replaceAll("\"label\"", "\"text\"");
        this.sealSpecTree = JSON.parse(str)
        // 设置默认选中第一个
        if (this.sealSpecTree != null) {
          let children = this.sealSpecTree[0].children;
          if (children != null) {
            let value02 = children[0].value;
            if (value02 != null) {
              this.selectSealSpec = children[0];
              this.selectSealSpecValue = value02;
              // 回调图片结果
              this.$emit('success', this.selectSealSpec, null);
            }
          }
        }
      });
    },
    /** 印章规格树改变 */
    handleSealSpecChange(e) {
      this.selectSealSpec = e;
    },
    /** 预览图片*/
    previewImg(path) {
      if (this.sealImageOk) {
        uni.previewImage({urls: [path], current: 0});
      }
    },
    /** 图片选取 1证件图片，2授权书图片 */
    handleFileChange() {
      if (this.selectSealSpec == null) {
        this.$modal.msgError("请先选择印章规格！");
        return;
      }
      let imageSrc = encodeURIComponent(this.sealImage);
      let width = this.selectSealSpec.pixelWidth;
      let height = this.selectSealSpec.pixelHeight;
      uni.navigateTo({url: "/pages/common/imageCropper/index?callbackMethod=sealAddCropperCropperSuccess&width=" + width + "&height=" + height + "&type=0&imageSrc=" + imageSrc});
    },
    /** 证件剪切成功回调方法 */
    cropperSuccess(base64, type) {
      this.sealImage = base64;
      this.sealImageOk = true;
      // 回调图片结果
      this.$emit('success', this.selectSealSpec, base64);
    },

  }
}
</script>

<style scoped lang="scss">
.item-title {
  font-weight: bold;
  font-size: 26rpx;
  color: #606266;
  margin: 15rpx 0;
}

.item-step {
  height: 50rpx;
  line-height: 50rpx;
  font-size: 26rpx;
  color: #606266;
  margin-left: 15rpx;
}

.authentication_payPic {
  display: flex;
  align-items: center;
  margin-top: 20rpx;

  .img_span {
    font-size: 24rpx;
    color: #999999;
    margin-left: 20rpx;
  }
}

</style>
